import React, { ReactNode, Component, Fragment } from 'react';
import { Table, Form, DatePicker, Button } from 'antd';
import moment from 'moment';

import _ from 'lodash';
import { getFinanceInfoColumns, StateType, PropType } from '../utils';
import { getFinanceInfo } from '../service';
import { initialTimeWithMill } from '@/utils/tools';
import { SUCCESS_CODE } from '../data';
import styles from '../style.less';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

function handleSendData(sendData: any) {
  const obj: any = {};
  obj.stime = sendData.time['0'].valueOf();
  obj.etime = sendData.time['1'].valueOf();
  delete sendData.time;
  _.forIn(sendData, (value, key) => {
    if (sendData[key] || sendData[key] === 0) {
      if (typeof value === 'string') {
        if (value.trim()) {
          obj[key] = value.trim();
        }
      } else {
        obj[key] = value;
      }
    }
  });
  return obj;
}

class FinanceInfo extends Component<PropType, StateType> {
  public state = {
    loading: false,
    tableData: {
      list: [],
    },
  };

  componentDidMount() {
    this.getList();
  }

  // 获取表格数据
  getList = (e?: React.SyntheticEvent) => {
    if (e) e.preventDefault();
    this.props.form.validateFieldsAndScroll((err: any, values: object) => {
      if (!err) {
        this.setState({ loading: true });
        const params = handleSendData(values);
        getFinanceInfo({ ...params, userId: this.props.id }).then((res: any) => {
          if (res) {
            const { code, data } = res;
            if (code === SUCCESS_CODE && data) {
              this.setState({ tableData: { list: [data] }, loading: false });
            }
          }
        });
      }
    });
  };

  // 渲染表单
  renderForm = () => {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form layout="inline" onSubmit={this.getList}>
        <FormItem>
          {getFieldDecorator('time', {
            initialValue: initialTimeWithMill(7),
          })(
            <RangePicker
              format="YYYY-MM-DD HH:mm:ss"
              placeholder={['开始时间', '结束时间']}
              showTime={{
                hideDisabledOptions: true,
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
              }}
            />,
          )}
        </FormItem>

        <FormItem>
          {/* 查询 */}
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </FormItem>
      </Form>
    );
  };

  render(): ReactNode {
    const { loading, tableData } = this.state;

    return (
      <Fragment>
        <h3 style={{ marginTop: '20px', display: 'flex' }}>
          <span className={styles.finance}>财务信息</span>
          {this.renderForm()}
        </h3>
        <Table
          bordered
          size="small"
          style={{ wordBreak: 'break-all' }}
          rowKey={(record: any, index: number) => String(index)}
          loading={loading}
          columns={getFinanceInfoColumns()}
          dataSource={tableData.list}
          pagination={false}
        />
      </Fragment>
    );
  }
}

const FinanceInfoContainer = Form.create({ name: 'financeInfo' })(FinanceInfo);
export default FinanceInfoContainer;
